<template>
	<view class="whitebg">
		 <!-- 饭店 -->
		<view class="roomList" style="padding-bottom: 60rpx;">
			<view class="room" v-for="r in roomList" :key="r.id">
			 <view>
				 <image class="roomCover" mode="aspectFill" :src="r.photo"></image>
			 </view>
			 <view>
				 <view class="name">丽华快餐</view>
				 <view class="flexinline"> 新华路 好贵大厦609室</view>
				 
				 <view class="po">
					 <view class="price">¥<text> 20</text> 起</view>
					 <view class="greenOrderBtn" @click="goOrder(r)">
						订
						<text>在线付</text>
					 </view>
				 </view>
			 </view>
		 </view>
		</view>
	</view>
	
</template>

<script setup>
	import {
		reactive,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import * as hotel from '@/common/hotel.js';
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	const data = reactive({
		form:{},
		roomList:[ 1,2,3]
	})
	const {
		form,startlist,roomList
	} = toRefs(data);
	let hotelId = null
	let foundRoomId = null
onLoad((option)=>{
	console.log(option)
	hotelId = option.hotelId
	foundRoomId = option.id
})	
onShow(()=>{
	getData()
})
function getData(){
	
}	
function goOrder(r){
	let path = `/pages_hotel/eat/menu`;
	uni.navigateTo({
		url: path
	});
}	
</script>

<style lang="scss" scoped>
	.pd20{padding: 20rpx;}
	.iconSquera{width: 40rpx;height: 40rpx;}
	.iconSquerab{width: 26rpx;height: 26rpx;margin:0 10rpx;}
	.info99{margin: 0 0 20rpx;    display: flex;
    align-items: center;
font-size: 24rpx;
color: #4C5359;}
	.cover{width: 700rpx;height: 393rpx;border-radius: 15rpx;margin: auto;    display: block;}
	swiper{height: 393rpx;}
	.level{    position: absolute;mix-blend-mode: difference;
	    color: #FFFFFF;
	    right: 40rpx;
	    top: 340rpx;
	    display: flex;
	    align-items: center;
	font-size: 24rpx;
			image{width: 33rpx;height: 37rpx;margin-right: 10rpx;}
		}
	.whitebg{background-color: #fff;margin-bottom: 20rpx;
		.tt{line-height: 1;
			border-left: 4rpx solid #1EC886;
			color: #1EC886;
			padding-left: 14rpx;}
	}
	.roomList{padding: 20rpx;box-sizing: border-box;}
	.room{display: flex;position: relative;    padding: 15rpx 0 15px;
border-bottom:1px solid #DCDCDC;
		.name{font-size: 34rpx;}
		.orange{font-size: 24rpx;}
		.po{position: absolute;right: 0;bottom: 15rpx;display: flex;align-items: flex-end;}
		.price{margin-right: 10rpx;}
	}
	.roomCover{width: 160rpx;margin-right: 20rpx;
height: 170rpx;
border-radius: 15rpx;}
	.greenOrderBtn{background: #1EC886;border-radius: 10rpx;color: #FFFFFF;font-size: 30rpx;width: 78rpx;height: 78rpx;
		text-align: center;padding: 6rpx;
		text{color: #1EC886;font-size: 18rpx;background: #FFFFFF;border-radius: 8rpx; display: block;
		margin-top: 8rpx;}
	}
	
	.tagbox{margin: 10rpx 0 15rpx;
		text{border: 1rpx solid #E96E00;border-radius: 4rpx;color: #E96E00;font-size: 20rpx;
		padding:0 6rpx;margin-right: 12rpx;display: inline-block;}
	}
	.price{display: flex;align-items: baseline;color: #1EC886;
		text{color: #1EC886;font-size: 55rpx;}
	}
	.flexinline{display: flex;font-size: 24rpx;color: #5E5E5E;
	 text{margin-right: 15rpx;}
	}
</style>